<template>
  <el-main >
    <el-card  class="box-card" style="width:320px;line-height:50px;   margin: auto;">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <div>
            <el-button type="text" style="color:#66b1ff" @click="dialogVisible = true">修改个人信息</el-button>

            <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="30%">
              <el-form ref="form" label-width="80px">
                <el-form-item label="用户名">
                  <el-input v-model="info.AID"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="info.phone"></el-input>
                </el-form-item>
                <el-form-item label="稽查报告">
                  <el-input v-model="info.report"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="info.password" show-password></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="implementModify">确 定</el-button>
                  </span>
            </el-dialog>
          </div>

        </div>
      </template>
      <div class="text item" style="float:left">
        <span style="margin-right:115px">用户名:</span><span>{{info.AID}}</span>
      </div>
      <div class="text item" style="float:left">
        <span style="margin-right:100px">用户权限:</span><span>稽查管理员</span>
      </div>
      <div class="text item" style="float:left">
        <span style="margin-right:100px">联系方式:</span><span>{{info.phone}}</span>
      </div>
    </el-card>
  </el-main>

</template>

<script>
import cookies from 'js-cookie'
import axios from 'axios'
export default {
  data(){
    return {
      info:{
        AID: "",
        password: "",
        phone: "",
        report: "",
      },
      role:'',
      dialogVisible:false,
      form: {
        name: '',
        number:''
      }
    };
  },
  mounted() {
    this.getInfo()
  },
  methods: {

    async getInfo(){
      let mydata={
        AID:cookies.get("id")
      }
      console.log(mydata)
      axios.post('/inspector-admin/get',mydata).then((res)=>{
        console.log(res)
        this.info=res.data.data[0]
        this.role=cookies.get("role")
        console.log(this.role)
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
.el-menu {
  border-right:0!important;
}
</style>
